
const get = el => document.querySelector(el);

const getCss = (ele, prop) => parseInt(getComputedStyle(ele)[prop]);


const setCss = (ele, options) => {
    for (let prop in options) {
        // ele.style.left = '100px'
        ele.style[prop] = options[prop];
    }
}


function move(options) {
    let { ele, speed, end, prop, cb } = options;
    let cur = getCss(ele, prop);
    speed = end > cur ? speed : -speed;
    let t = setInterval(() => {
        cur += speed;
        setCss(ele, {
            [prop]: cur + 'px'
        });
        if (Math.abs(end - cur) < Math.abs(speed)) {
            console.log('结束');
            clearInterval(t);
            setCss(ele, {
                [prop]: end + 'px'
            });
            cb && cb()
        }
    }, 20)
}



// 无缝轮播
//    把第一张图复制一份放在最后面


//   控制播放第几张  index
//   定时器         timer
//   图片  
//   小点
//   左右切换

//   方法
//     自动播放   autoPlay

//     绑定事件   


function Swiper(ele, type) {
    this.oBox = get(ele);
    // 找到装图片的大盒子
    this.oUl = this.oBox.querySelector('ul');
    // 找到图片
    this.oImgs = this.oBox.querySelectorAll('ul li');
    // 找到小点
    this.oDots = this.oBox.querySelectorAll('ol li');
    // 上
    this.oPrev = this.oBox.querySelector('.prev');
    this.oNext = this.oBox.querySelector('.next');
    // 控制播放第几张
    this.index = 0;
    this.timer = null;
    this.flag = true ;

    // 获取图片的宽度
    this.h = this.oImgs[0].offsetHeight;

    // 确认小点切换的事件类型
    this.type = type || 'click';

    // 自动播放
    this.autoPlay();

    // 绑定事件
    this.event();

}

Swiper.prototype.autoPlay = function () {
    this.timer = setInterval(() => {
        this.index++;
        // 显示图片和小点
        this.show();
    }, 2000)
}


Swiper.prototype.show = function () {
    move({
        ele: this.oUl,
        speed: 30,
        end: -this.index * this.h,
        prop: 'top',
        cb: () => {
            this.flag = true ;
            if (this.index === this.oImgs.length - 1) {
                this.index = 0;
                setCss(this.oUl, {
                    top: 0
                })
            }
        }
    });

    // 小点
    for (let i = 0; i < this.oDots.length; i++) {
        this.oDots[i].classList.remove('active')
    }
    if (this.index === this.oImgs.length - 1) {
        this.oDots[0].classList.add('active')
    } else {
        this.oDots[this.index].classList.add('active')
    }

}


Swiper.prototype.event = function () {

    this.oBox.onclick = e => {
        if(!this.flag) return 
        this.flag = false ;
        if (e.target === this.oPrev) {
            clearInterval(this.timer);
            if (this.index === 0) {
                this.index = this.oImgs.length - 1;
                setCss(this.oUl, {
                    top: -this.index * this.h + 'px'
                })
            }
            this.index--;
            this.show();
        }
        else if (e.target === this.oNext) {
            clearInterval(this.timer);
            if (this.index === this.oImgs.length - 1) {
                this.index = 0;
                setCss(this.oUl, {
                    top: -this.index * this.h + 'px'
                })
            }
            this.index++;
            this.show();
        }

        else if ([...this.oDots].includes(e.target)) {
            // 排除自己
            if(e.target.classList.contains('active')) return 
            clearInterval(this.timer);
            this.index = e.target.getAttribute('num');
            this.show()
        }
    }

}